<template>
  <el-dialog
    title="考核组成设置"
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    width="500px"
    :close-on-click-modal="false"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="考核部分名称" prop="name">
        <el-input v-model="form.name" placeholder="如：平时成绩、期末考试" />
      </el-form-item>
      
      <el-form-item label="比例(%)" prop="proportion">
        <el-input-number 
          v-model="form.proportion" 
          :min="1" 
          :max="100"
          :step="5"
          controls-position="right"
          style="width: 100%"
        />
      </el-form-item>
      
      <el-form-item label="评分类型" prop="scoreTypeId">
        <el-select v-model="form.scoreTypeId" placeholder="选择评分类型" style="width: 100%">
          <el-option 
            v-for="type in scoreTypes" 
            :key="type.id" 
            :label="type.name" 
            :value="type.id"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="考核性质" prop="examPartType">
        <el-select v-model="form.examPartType" placeholder="请选择考核类型" style="width: 100%">
          <el-option label="形成性考核" value="FORMATIVE" />
          <el-option label="终结性考核" value="FINAL" />
          <el-option label="其它" value="OTHER" />
        </el-select>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, reactive, watch, nextTick } from 'vue'

export default {
  name: 'ExamPartFormDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    examPart: {
      type: Object,
      default: () => ({})
    },
    scoreTypes: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:visible', 'submit'],
  setup(props, { emit }) {
    const formRef = ref()
    
    const form = reactive({
      name: '',
      proportion: 0,
      examPartType: 'OTHER',
      scoreTypeId: null
    })
    
    const rules = {
      name: [
        { required: true, message: '请输入考核部分名称', trigger: 'blur' }
      ],
      proportion: [
        { required: true, message: '请输入比例', trigger: 'blur' },
        { type: 'number', min: 1, max: 100, message: '比例必须在1-100之间', trigger: 'blur' }
      ],
      scoreTypeId: [
        { required: true, message: '请选择评分类型', trigger: 'change' }
      ],
      examPartType: [
        { required: true, message: '请选择考核性质', trigger: 'change' }
      ]
    }
    
    const initForm = () => {
      if (props.examPart) {
        Object.assign(form, {
          name: props.examPart.name || '',
          proportion: props.examPart.proportion || 0,
          examPartType: props.examPart.examPartType || 'OTHER',
          scoreTypeId: props.examPart.scoreTypeId || null
        })
      }
    }
    
    const resetForm = () => {
      Object.assign(form, {
        name: '',
        proportion: 0,
        examPartType: 'OTHER',
        scoreTypeId: null
      })
      nextTick(() => {
        formRef.value?.clearValidate()
      })
    }
    
    const handleSubmit = async () => {
      try {
        await formRef.value.validate()
        emit('submit', { ...form })
        resetForm()
      } catch (error) {
        // 表单验证失败，不进行提交
      }
    }
    
    const handleCancel = () => {
      emit('update:visible', false)
      resetForm()
    }
    
    watch(() => props.visible, (newValue) => {
      if (newValue) {
        initForm()
      } else {
        resetForm()
      }
    })
    
    watch(() => props.examPart, () => {
      if (props.visible) {
        initForm()
      }
    }, { deep: true })
    
    return {
      formRef,
      form,
      rules,
      handleSubmit,
      handleCancel
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>